<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>
    <link th:replace="~{public::layui}">
    <style>
        #page{
            text-align:center;
        }
        .mainbox{
            width: 100%;
            display: flex;
            justify-content: center;
            /* border: 1px solid black; */
            text-align: center;
        }
        .textlist{
            width: 700px;
            box-shadow: gray 0px 0px 10px;
            border-radius: 20px;
            margin-bottom: 10px;
        }
        .textbox{
            width: 660px;
            height: 80px;
            /* border:1px black solid; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        .textbox .head{
            display: flex;
            width: 170px;
            height: 50px;
            justify-content: center;
            align-items: center;
        }
        .textbox .head img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .textbox .head .names{
            font-size: 18px;
            font-weight: 800;
        }
        .textbox .head .left{
            text-align: left;
            margin-left:5px;
            white-space:normal;
            word-break:break-all;
            word-wrap:break-word;
        }
        .textbox .head .time{
            font-size: 14px;
            width: 130px;
        }
        .textbox .head .updates{
            color: grey;
            font-size: 14px;
        }
        .contentbox{
            width: 700px;
            display: flex;
            justify-content: center;
            /* border:1px black solid; */
            /* height: 200px; */
        }
        .contentbox .content{
            width: 600px;
            padding-bottom: 15px;
        }
        .tail{
            display: flex;
            width: 660px;
            justify-content:flex-end;
            padding: 10px 20px;
        }
        .tail .dianzan{
            padding: 0 20px 0 0;
        }


    </style>
    <script>
        var $ = layui.jquery;
        /*
    发布文章
    */
        function sendArticle(){
            layer.open({
                id:1,
                type: 1,
                title:'发布文章',
                skin:'demo-class',
                area:['450px', '350px'],
                content:'<style>'
                    +'.col-sm-12{margin-top:30px;}'
                    +'#content{margin-left:70px;width:300px;height:200px;}'
                    +'</style>'

                    +'<div class="col-sm-12">'
                    +'<textarea cols="50" rows="10" id="content">  </textarea>'
                    +'</div>'
                ,
                btn:['提交','取消'],
                btn1: function (index,layero) {
                    if($("#content").val() == "" && $("#content").val()==null){
                        layer.msg("内容不能为空", {icon: 2});
                        return;
                    }
                    var content=$("#content").val()
                    console.log(content)
                    $.ajax({
                        type:"post",
                        url:"/article/add",
                        async : true,
                        data:"content="+content,
                        //contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success:function(data){
                            console.log(data);
                            if(data.code == 0){
                                layer.msg("发布成功!", {icon: 1});
                                layer.close(index);
                            }else{
                                layer.msg("发布失败!", {icon: 2});
                            }

                        },
                        error:function(data,status,e){
                            layer.msg('错误,请检查网络是否正常'+e);
                        }
                    });
                },
                btn2:function (index,layero) {
                    layer.close(index);
                }

            });
        }



        /*
        * 分页查询文章
        * */

        layui.use(['jquery','laypage','form'],function($,laypage,form){
            function load(page,pageSize,queryString){
                $.ajax({
                    type:"get",
                    url:"/article",
                    async : true,
                    data:"page="+page+"&pageSize="+pageSize+"&"+queryString,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success:function(d){
                        if(d.code == -1){
                            layer.msg(d.message, {icon: 2});
                        }else if(d.code == 0){
                            console.log(d)
                            console.log(d.page)
                            console.log(d.pageSize)
                            console.log("成功了")
                            laypage.render({
                                elem:'page',
                                count:d.count,
                                limit:d.pageSize,
                                curr:d.page,
                                layout:['prev','page','limit','next'],
                                jump:function(obj,first){
                                    if(!first){
                                        load(obj.curr,obj.limit);
                                    }

                                }

                            });
                            //渲染数据
                            const tbody = $("#student-data")
                            //html拼接
                            let html="";
                            for(let student of d.data){
                                html +="<div class=mainbox>"
                                html +="<div class=textlist>"
                                html +="<div class=textbox>"
                                html +="<div class=head>"
                                html +="<div><img src=//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg></div>"
                                html +="<div class=left>"
                                html +="<div class=names>"+student.name+"</div>"
                                html +="<div class=time>"+student.createTime+"</div>"
                                html +="</div>"
                                html +="</div>"
                                html +="<div class=updates></div>"
                                html +="</div>"
                                html +="<div class=contentbox>"
                                html +="<div class=content>"+student.contentArticle+"</div>"
                                html +="</div>"
                                html +="<div class=tail>"
                                html +="<div class=dianzan>点赞</div>"
                                html +="<div>"+student.id+"</div>"
                                html +="</div>"
                                html +="</div>"
                                html +="</div>"
                            }
                            tbody.html(html);
                        }
                    },
                    error:function(data,status,e){
                        layer.msg('错误'+e);
                    }
                });
            }
            load(1,4);
            form.on("submit(watch)",function(obj){
                load(1,10,"name="+obj.field.name+"&status="+obj.field.status)
                return false;
            })
        });







    </script>
</head>
<body>
<button type="button" onclick="sendArticle()">发布动态</button><br>
<div class = "layui-container">
    <div class = "layui-row">
        <div class = "layui-col-md6 layui-col-md-offset3">
            <form class="layui-form">
                <div class = "layui-form-item">
                    <div class = "layui-form-label">姓名:</div>
                    <div class = "layui-input-block">
                        <input type="text" class="layui-input" name ="name">
                    </div>

                    <div class = "layui-form-item layui-row">
                        <button type="submit" lay-submit lay-filter="watch" class="layui-btn layui-btn-normal layui-col-md4 layui-col-md-offset4">确认查询</button>
                    </div>

                </div>
            </form>

        </div>
    </div>
</div>
<div id="student-data">
</div>
<div id ="page">分页</div>

</body>

</html>